/**
 * 项目详情页
 */
<template>
  <div id="archives">

    <el-row>
    <div class="title">项目详情 </div>
    
    <el-dialog title="收货地址" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="form">
        <el-form-item label="序号" :label-width="formLabelWidth">
          <el-input v-model="formAdd.data" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="档案名称" :label-width="formLabelWidth">
          <el-input v-model="formAdd.data1" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleAddOk">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
    <el-row>
      <div class="table-wrapper">
        <el-table 
        :span-method="arraySpanMethod"  
        row-key="id"
        :data="tableData" 
        style="width: 100%"
        :tree-props="{children: 'children'}"
        >
          <el-table-column prop="data" label="序号" width="120">
            <template slot-scope="scope">
              {{ scope.row.data }}
              {{ getData1(scope) }}
            </template>
          </el-table-column>
          <el-table-column prop="data1" label="档案名称" width="230">
          </el-table-column>
          <el-table-column prop="data2" label="项目负责人" width="150">
          </el-table-column>
          <el-table-column prop="data3" label="保存期限" width="150">
          </el-table-column>
          <el-table-column label="交城建档案馆" width="150">
            <el-table-column prop="data4" label="纸质" width="75">
              <template slot-scope="scope">
                {{ !scope.row.data4?"":(scope.row.data4=="1"?"是":"否") }}
            </template>
            </el-table-column>
            <el-table-column prop="data5" label="电子" width="75">
              <template slot-scope="scope">
                {{ !scope.row.data5?"":(scope.row.data5=="1"?"是":"否") }}
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="data6" label="档案是否齐全" width="100">
            <template slot-scope="scope">
              {{ !scope.row.data6?"":(scope.row.data6=="1"?"是":"否") }}
            </template>
          </el-table-column>
          <el-table-column prop="data7" label="备注" width="100">
          </el-table-column>
          <el-table-column prop="data8" label="是否已移交至档案室" width="100">
            <template slot-scope="scope">
                {{ !scope.row.data8?"":(scope.row.data8=="1"?"是":"否") }}
            </template>
          </el-table-column>
          <el-table-column prop="data13" label="是否移交工程部" width="100">
            <template slot-scope="scope">
                {{ !scope.row.data13?"":(scope.row.data13=="1"?"是":"否") }}
            </template>
          </el-table-column>
          <el-table-column prop="data9" label="移交时间" width="150">
          </el-table-column>
          <el-table-column prop="data10" label="档案编号" width="150">
          </el-table-column>
          <el-table-column prop="data11" label="上传者" width="150">
          </el-table-column>
          <el-table-column prop="data12" label="上传时间" width="150">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
              <div v-show="getShowData(scope.$index)">
                <el-button class="upload-text" @click="uploadButton(scope)" type="text" size="small">上传</el-button>
                <el-button  class="ok-text" @click="getCurRowDetail(scope)" type="text" size="small">确认</el-button>
                <el-button  class="ok-text" @click="getCurRowDown(scope)" type="text" size="small">下载</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <!-- <el-button type="primary"  @click="dialogFormVisibleAdd = true">新增</el-button> -->

    <!-- <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="paginationBox.currentPage"
      :page-size="paginationBox.pageSize"
      layout="prev, pager, next"
      :total="paginationBox.total">
    </el-pagination> -->

    <el-dialog title="上传档案附件" :visible.sync="dialogFormVisible" width="800px" >
      <el-form inline :model="form">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="项目负责人" :label-width="formLabelWidth">
          <el-input v-model="form.data2" autocomplete="off"></el-input>
        </el-form-item>
        
          </el-col>
          <el-col>
            <el-form-item label="保存期限" :label-width="formLabelWidth">
          <el-input v-model="form.data3" autocomplete="off"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="纸质" :label-width="formLabelWidth">
          <el-radio v-model="form.data4" label="1">是</el-radio>
          <el-radio v-model="form.data4" label="0">否</el-radio>
        </el-form-item>
        
          </el-col>
          <el-col>
            <el-form-item label="电子" :label-width="formLabelWidth">
          <el-radio v-model="form.data5" label="1">是</el-radio>
          <el-radio v-model="form.data5" label="0">否</el-radio>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="档案是否齐全" :label-width="formLabelWidth">
          <el-radio v-model="form.data6" label="1">是</el-radio>
          <el-radio v-model="form.data6" label="0">否</el-radio>
        </el-form-item>
        
          </el-col>
          <el-col>
            <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.data7" autocomplete="off"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="移交档案室" :label-width="formLabelWidth">
          <el-radio v-model="form.data8" label="1">是</el-radio>
          <el-radio v-model="form.data8" label="0">否</el-radio>
        </el-form-item>
        
          </el-col>
          <el-col>
            <el-form-item label="移交工程部" :label-width="formLabelWidth">
          <el-radio v-model="form.data13" label="1">是</el-radio>
          <el-radio v-model="form.data13" label="0">否</el-radio>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="移交时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.data9"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        
          </el-col>
          <el-col>
            <el-form-item label="档案编号" :label-width="formLabelWidth">
          <el-input v-model="form.data10" autocomplete="off"></el-input>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-form-item label="上传者" :label-width="formLabelWidth">
          <el-input v-model="form.data11" autocomplete="off"></el-input>
        </el-form-item>
        
          </el-col>
          <el-col>
            <el-form-item label="上传时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.data12"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
          </el-col>
        </el-row>
        
        
        
        
        
        
        <el-row>
          <el-form-item label="附件上传：" :label-width="formLabelWidth">
            <!-- <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleChange"
              :file-list="fileList">
              <el-button size="small" class="el-icon-folder-opened upload-btn" type="primary">&nbsp; 选择...</el-button>
              <div slot="tip" class="el-upload__tip"></div>
            </el-upload> -->
            <el-upload
                ref="upload"
                class="upload-demo"
                action="/mfolder/upload"
                :http-request="fileUpload"
                :data="data"
                :name="name"
                :file-list="fileList"
                :auto-upload="true"
                :show-file-list="false"
            >
            
            <el-button size="small" class="el-icon-folder-opened upload-btn" type="primary">&nbsp; 选择...</el-button>
            </el-upload>
            <div>
              <div v-for="(item,index) in form.fileLists">{{ item }}</div>
            </div>
          </el-form-item>
        </el-row>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="okbutton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { deptList, deptSave, deptDelete } from '../../api/userMG'
// import Pagination from '../../components/Pagination'
import { getRecordByProjectId,addRecords,getFILEPATH,downFile } from '../api/api'
import baseConfig from '../api/base'
import axios from 'axios'
export default {
  data() {
    return {
      paginationBox:{
        currentPage:1,
        total:30,
        pageSize:10
      },
      sliceIndex:[0,84,274],//将数据进行分段分割
      currentPage:1,
      formAdd:{
        data:'',
        data1:'',
        data2:'',
        data3:'',
        data4:'',
        data5:'',
        data6:'',
        data7:'',
        data8:'',
        data9:'',
        data10:'-',
        data11:'-',
        data12:'-',
        data13:'',
      },
      dialogFormVisibleAdd:false,
      fileList: [
        // {
        //   name: 'food.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }, {
        //   name: 'food2.jpeg',
        //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        // }
      ],
      form: {
        fileLists:[]
      },
      formLabelWidth: '120px',
      dialogFormVisible:false,
      archivesName: "",
      tableData: [
        
      ],
      queryList:{},
      PARENT_ID: 'ab0c6686b05d43ee85cd941997ece807',
      SHARE:	'no',				//是否共享
      REMARKS:"1",
      calculatType:1,
      name:"FFILE",
      actionUrl:baseConfig.baseUrl.dev+"/mfolder/upload",
      data:{
        NAME:'1111',
        PARENT_ID: 'ab0c6686b05d43ee85cd941997ece807',
        SHARE:	'no',				//是否共享
        REMARKS:"1",
        calculatType:1
      },
      rowIndex:0,
      rowIndexArr:[0,1,9,27,65,73,76,84,274]
    }
  },
  filters:{
    dataFilter(data){
    }
  },
  // 注册组件
  components: {
    // Pagination
  },
  /**
   * 数据发生改变
   */
  computed:{
    getData(value){
      
    }
  },
  /**
   * 创建完毕
   */
  created() {
    this.init()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getCurRowDown(scope){
      if(scope.row.fileLists==undefined || scope.row.fileLists==""){
        this.$message.warning("文件未上传")
        return
      }
      this.getMFOLDER_IDandDown(scope.row.fileLists[0])
    },
    getMFOLDER_IDandDown(FILEPATH){
      getFILEPATH({FILEPATH:FILEPATH}).then(res=>{
        if(res==''){
            this.$message.error("要下载的文件已经没有了!")
            return
        }
        this.goDownFile(res[0].MFOLDER_ID)
      });
    },
    async goDownFile(MFOLDER_ID){
      window.location.href = baseConfig.baseUrl.dev + '/mfolder/download?MFOLDER_ID='+MFOLDER_ID;   
    },
    handleCurrentChange(currentPage){
      this.paginationBox.currentPage = currentPage
      this.tableData = this.sliceTableDataArr[this.paginationBox.currentPage-1];
    },
    async dialogFormVisibleAddOk(){
      this.dialogFormVisibleAdd = false
      this.tableData.push(this.formAdd)
      let data = await addRecords({projectId:this.queryList.projectId,recordText:JSON.stringify(this.tableData)});
      this.$message.success("新增成功");
      this.init()
    },
    getCurRowDetail(scope){
      this.dialogFormVisible = true
      this.form = scope.row.uploadBox || {
        fileLists:[]
      }
    },
    uploadButton(scope){
      this.form = {
        fileLists:[]
      }
      this.rowId = scope.row.id
      this.dialogFormVisible = true
    },
    transformTreeData(tableData,rowId){
      tableData.forEach(element => {
        if(element.id == rowId){
          element.uploadBox = this.form
          Object.assign(element,this.form)
        }
        if(element.children){
          element.children.forEach(item=>{
            if(item.id == rowId){
              item.uploadBox = this.form
              Object.assign(item,this.form)
            }
          })
        }
      });
    },
    async okbutton(){
      this.dialogFormVisible = false
      this.transformTreeData(this.tableData,this.rowId)
      let data = await addRecords({projectId:this.queryList.projectId,recordText:JSON.stringify(this.tableData)});
      this.$message.success("编辑成功");
      this.init()
    },
    async fileUpload (param) {
            let _this = this
            const loading = this.$loading({
                lock: true,
                text: '文件上传中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            setTimeout(function () {
                loading.close()
            }, 500)
            
            const formData = new FormData()
            formData.append('FFILE', param.file)// 传文件
            formData.append('NAME', param.file.name.substring(0, param.file.name.lastIndexOf(".")))
            formData.append('PARENT_ID', this.PARENT_ID)
            formData.append('SHARE', this.SHARE)
            formData.append('REMARKS', this.REMARKS)
            formData.append('type', this.calculatType)// 传文件

            axios.post(baseConfig.baseUrl.dev + '/mfolder/upload',formData)
            .then(res=>{
              this.form.fileLists = []
              this.form.fileLists.push(res.data.path)
              
            })

        },
    async init(){
      this.queryList.projectId = this.$route.query.id
      let data = await getRecordByProjectId(this.queryList);
      this.tableData = JSON.parse(data.recordText)
      let newTableData = this.tableData.map((item,index)=>{
          if(this.rowIndexArr.includes(index)){
            return {
              ...item
            }
          }
          return ({
            ...item
          })
      })
      this.tableData = newTableData

      // this.spliceFunc(newTableData);//分割数据
    },
    spliceFunc(newTableData){
      let arr = [];
      for(let i=0;i<this.sliceIndex.length;i++){
        if(i==this.sliceIndex.length){
          arr.push( newTableData.slice(this.sliceIndex[i]) )
          continue
        }
        arr.push( newTableData.slice(this.sliceIndex[i],this.sliceIndex[i+1]) )
      }
      this.sliceTableDataArr=arr
      this.tableData = this.sliceTableDataArr[this.paginationBox.currentPage-1];
      // this.tableData = newTableData
    },
    getShowData(index){
      let arrRowIndex = this.rowIndexArr
      if(arrRowIndex.includes(index)){
        return false
      }
      return true
      
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      let arrColumnIndex = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]
      let arrRowIndex = this.rowIndexArr
      if (arrRowIndex.includes(rowIndex)) {
        if (arrColumnIndex.includes(columnIndex)) {
          return [1, 15];
        }
      }
    },
    getData1(data){
      let arr = ['建设用地、拆迁文件','勘察、设计文件','招投标文件','开工审批文件','工程造价文件','前期相关其他资料','施工阶段','竣工阶段']
      if(arr.includes(data.row.data)){
        // console.log(data.$index)
      }
    },
    // 获取公司列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            addUser: null,
            editUser: null,
            addTime: 1521062371000,
            editTime: 1526700200000,
            deptId: 2,
            deptName: 'XX分公司',
            deptNo: '1',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1521063247000,
            editTime: 1526652291000,
            deptId: 3,
            deptName: '上海测试',
            deptNo: '02',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526349555000,
            editTime: 1526349565000,
            deptId: 12,
            deptName: '1',
            deptNo: '11',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526373178000,
            editTime: 1526373178000,
            deptId: 13,
            deptName: '5',
            deptNo: '5',
            parentId: 1
          },
          {
            addUser: null,
            editUser: null,
            addTime: 1526453107000,
            editTime: 1526453107000,
            deptId: 17,
            deptName: 'v',
            deptNo: 'v',
            parentId: 1
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 模拟数据结束

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      // deptList(parameter)
      //   .then(res => {
      //     this.loading = false
      //     if (res.success == false) {
      //       this.$message({
      //         type: 'info',
      //         message: res.msg
      //       })
      //     } else {
      //       this.listData = res.data
      //       // 分页赋值
      //       this.pageparm.currentPage = this.formInline.page
      //       this.pageparm.pageSize = this.formInline.limit
      //       this.pageparm.total = res.count
      //     }
      //   })
      //   .catch(err => {
      //     this.loading = false
      //     this.$message.error('菜单加载失败，请稍后再试！')
      //   })
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.deptId = row.deptId
        this.editForm.deptName = row.deptName
        this.editForm.deptNo = row.deptNo
      } else {
        this.title = '添加'
        this.editForm.deptId = ''
        this.editForm.deptName = ''
        this.editForm.deptNo = ''
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          deptSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '公司保存成功！'
                })
              } else {
                // this.$message({
                //   type: 'info',
                //   message: res.msg
                // })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('公司保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deptDelete(row.deptId)
            .then(res => {
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '公司已删除!'
                })
                this.getdata(this.formInline)
              } else {
                // this.$message({
                //   type: 'info',
                //   message: res.msg
                // })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('公司删除失败，请稍后再试！')
            })
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
$defaultColor: #5ebedc;
$defaultBorderColor: #d3d1d1;
$defaultHeaderBorderColor:#cecbcb;

#archives {
  /deep/ .el-input__inner {
    height: 35px;
  }
  /deep/ .el-dialog {
    border: 10px;
  }
  .upload-btn {
    background-color: #3978b4;
  }
  .ok-text {
    color:#3a85d1;
    &:hover {
      color: #b8d2f0;
    }
  }
  .upload-text {
    color:#3a85d1;
    &:hover {
      color: #b8d2f0;
    }
  }

  .cs {
    cursor: pointer;
  }

  .tickets {
    color: #81850a;
  }

  .title {
    font-size: 22px;
    font-family: monospace;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .input-width {
    .item-pre {
      color: #696969;
    }

    width: 300px;
    color: #979797;
  }

  .mgl {
    margin-left: 5px;
  }

  .el-button+.el-button {
    margin-left: 5px;
  }

  .default-button {
    /deep/ i {
      font-weight: 600;
    }

    padding: 10px 13px 9px 12px;
    border: 1px solid $defaultColor;
    background-color: $defaultColor;
  }

  .table-wrapper {
    padding-left: 15px;
  }

  .table-style {
    width: 100%;
  }

  .el-table--border {
    border: 1px solid #cddcf1;
  }

  /deep/ .el-table--border .el-table__cell:first-child .cell {
    padding-right: 0;
  }
  // .el-table__row--level-1 {
  //   /deep/ .el-table--border .el-table__cell:first-child .cell {
  //     padding-right: 0;
  //   }
  // } 
  

  /deep/ .el-table thead th.el-table__cell {
    background-color: #d9ecf6;
    text-align: center;
  }

  /deep/ .el-table--border .el-table__cell,
  .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid $defaultBorderColor;
    border-bottom: 1px solid $defaultBorderColor;
    color: #484848;
    padding: 5px 0 0;
  }

  /deep/ .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid $defaultBorderColor;
    color: #484848;
    padding: 5px 0 0;
  }

  $rowIndex:10,28,66,74,77,85,275;
  $rowIndexIndent:2,10,28,66,74,77,85,275;

  

  /deep/ .el-table__body {
    tbody {
      tr{
        td {
          // background-color: #f3f3f3;
          text-align: center;
          color: #444444;
        }
      }
      tr:nth-child(1),tr:nth-child(2) {
        td {
          text-align: left;
          font-weight: bolder;
        }
      }

      @for $i from 1 through length($rowIndex) {
        $item: nth($rowIndex, $i);
        tr:nth-child(#{$item}){
            td {
              text-align: left;
              font-weight: bolder;
            }
        }
      }
      // @for $i from 1 through length($rowIndexIndent) {
      //   $item: nth($rowIndexIndent, $i);
      //   tr:nth-child(#{$item}){
      //       td {
      //         text-indent: 20px;
      //       }
      //   }
      // }
      
    }
  }
}
</style>

 
 